<template>
	<view>
		<ttBar leftIcon="icon-back" title="订单管理"></ttBar>
		<scroll-view scroll-x="true" class="tabBar">
			<view class="tabList">

				<text class="tabItem" :class="[(orderShow==1||orderShow==2||orderShow==3)?'active':'']" :data-type="1" @tap="toggleSc">待付款{{orderCount[10]?('('+orderCount[10]+')'):''}}</text>
				<text class="tabItem" :class="[orderShow==4?'active':'']" :data-type="4" @tap="toggleSc">待体验{{orderCount[41]?('('+orderCount[41]+')'):''}}</text>
				<text class="tabItem" :class="[orderShow==5?'active':'']" :data-type="5" @tap="toggleSc">待开课{{orderCount[4]?('('+orderCount[4]+')'):''}}</text>
				<text class="tabItem" :class="[orderShow==10?'active':'']" :data-type="10" @tap="toggleSc">已开课{{orderCount[5]?('('+orderCount[5]+')'):''}}</text>
				<text class="tabItem" :class="[(orderShow==6||orderShow==7)?'active':'']" :data-type="6" @tap="toggleSc">退款售后{{orderCount[11]?('('+orderCount[11]+')'):''}}</text>
				
				<text class="tabItem" :class="[orderShow==8?'active':'']" :data-type="8" @tap="toggleSc">已关闭{{orderCount[8]?('('+orderCount[8]+')'):''}}</text>
				<text class="tabItem" :class="[orderShow==9?'active':'']" :data-type="9" @tap="toggleSc">已完成{{orderCount[9]?('('+orderCount[9]+')'):''}}</text>
				<!-- <text class="tabItem" :class="[orderShow==0?'active':'']" :data-type="0" @tap="toggleSc">全部{{orderCount[0]?('('+orderCount[0]+')'):''}}</text> -->
			</view>
		</scroll-view>
		<view class="paymentBox" v-if="orderShow==1||orderShow==2||orderShow==3">
			<text class="paymentItem" :class="[orderShow==1?'active':'']" :data-type="1" @tap="toggleSc">待付预约金{{orderCount[1]?('('+orderCount[1]+')'):''}}</text>
			<text class="paymentItem" :class="[orderShow==2?'active':'']" :data-type="2" @tap="toggleSc">待付尾款{{orderCount[2]?('('+orderCount[2]+')'):''}}</text>
			<text class="paymentItem" :class="[orderShow==3?'active':'']" :data-type="3" @tap="toggleSc">待付全款{{orderCount[3]?('('+orderCount[3]+')'):''}}</text>
			
		</view>
		<view class="paymentBox" v-if="orderShow==6||orderShow==7">
			
			<text class="paymentItem" :class="[orderShow==6?'active':'']" :data-type="6" @tap="toggleSc">退款中{{orderCount[6]?('('+orderCount[6]+')'):''}}</text>
			<text class="paymentItem" :class="[orderShow==7?'active':'']" :data-type="7" @tap="toggleSc">已退款{{orderCount[7]?('('+orderCount[7]+')'):''}}</text>
		</view>
		<scroll-view scroll-y="true" :style="{'height':(orderShow==1||orderShow==6)?scHeight+'px':scHeight2+'px'}"
		 @scrolltolower="pushData">
			<view class="orderList">
				<block v-for="(item,index) in orderData" :key="index">
					<block v-if="orderShow!=0">
						<prepayItem v-if="(item.status==1||item.status==3 || item.status==2) && (orderShow==1||orderShow==2||orderShow==3)" :item="item"></prepayItem>
						<preExpItem v-if="(item.status==4 &&orderShow==4) || (item.status==2 && item.tri==1 && item.tryTime==null && orderShow==4)" :item="item"></preExpItem>
						<preOpenItem v-if="orderShow==5" :item="item"></preOpenItem>
						<opend v-if="orderShow==10" :item="item"></opend>
						<refoundItem v-if="item.status==6 || item.status==7" :item="item"></refoundItem>
						<closeItem v-if="item.status==8" :item="item"></closeItem>
						<sucessItem v-if="item.status==9" :item="item"></sucessItem>
					</block>
					<block v-if="orderShow==0">
						<orderItem :item="item"></orderItem>
					</block>
					
				</block>
			</view>
			<emptyBox v-if="orderData.length<1" type="order"></emptyBox>
		</scroll-view>

		<poup ref="remarkPoup" :isCntSlot="true">
			<template v-slot:cntSlot>
				<input class="remarkInput" type="text" placeholder="请输入备注信息" v-model="remarkText" />
			</template>
		</poup>
		<poup ref="labelPoup" :isCntSlot="true">
			<template v-slot:cntSlot>
				<input class="remarkInput" type="text" placeholder="请输班级标签" v-model="classLabel" />
			</template>
		</poup>
		<poup ref="pricePoup" :isCntSlot="true">
			<template v-slot:cntSlot>
				<input class="remarkInput" type="number" placeholder="请输入修改的价格" v-model="editPrice" />
			</template>
		</poup>
	</view>
</template>

<script>
	import poup from "@/components/poup/poup.vue";
	import ttBar from "@/components/ttBar/ttBar.vue";
	import orderItem from "@/components/orderItem/orderItem.vue";
	import prepayItem from "@/components/orderItem/prepayItem.vue";
	import preExpItem from "@/components/orderItem/preExpItem.vue";
	import preOpenItem from "@/components/orderItem/preOpenItem.vue";
	import refoundItem from "@/components/orderItem/refoundItem.vue";
	import closeItem from "@/components/orderItem/closeItem.vue";
	import sucessItem from "@/components/orderItem/sucessItem.vue";
	import opend from "@/components/orderItem/opend.vue";
	import emptyBox from "@/components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import {
		mapState
	} from "vuex";
	export default {
		components: {
			ttBar,
			orderItem,
			poup,
			emptyBox,
			prepayItem,
			preExpItem,
			preOpenItem,
			refoundItem,
			closeItem,
			sucessItem,
			opend
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				selectShop: state => state.shop.selectShop,
				orderCount: state => state.order.orderCount,
			})

		},
		data() {
			return {
				orderShow: 1,
				statusArr: ['全部', '待付预约金', '待付尾款', '待付全款', '待开卡', '已开课', '退款中', '已退款', '已关闭', '已完成'],
				isPayment: true,
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - (uni.upx2px(90) * 3),
				scHeight2: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - (uni.upx2px(90) * 2),
				remarkText: '',
				classLabel: '',
				orderData: [],
				hasNext: false,
				nextPage: 1,
				tongji: [],
				editPrice:''
			};
		},
		methods: {
			getData() {
				API.getOrderList({
					storeId: this.selectShop.id,
					status: this.orderShow,
					page_no: this.nextPage,
					page_size: 10
				}).then(res => {
					this.orderData = res.data.data.items
					this.hasNext = res.data.data.hasNext
					this.nextPage = res.data.data.nextPage
				})
			},
			toggleSc(e) {
				let _status = e.currentTarget.dataset.type
				this.orderShow = parseInt(e.currentTarget.dataset.type);
				this.nextPage=1;
				this.orderData=[];
				this.getData()
			},
			pushData() {
				if (this.hasNext) {
					API.getOrderList({
						storeId: this.selectShop.id,
						status: this.orderShow,
						page_no: this.nextPage,
						page_size: 10
					}).then(res => {
						this.orderData = this.orderData.concat(res.data.data.items)
						this.hasNext = res.data.data.hasNext
						this.nextPage = res.data.data.nextPage
					})

				} else {
					uni.showToast({
						title: '没有更多数据了',
						icon: 'none'
					});
				}
			}
		},
		onLoad(cfm) {
			// console.log(this.orderCount[41]);
			let _this = this;
			if (cfm.status) {
				this.orderShow = parseInt(cfm.status)
			}
			_this.getData();

			//添加备注
			uni.$on("remark", function(order) {
				let _index = null;
				let tapOrder = _this.orderData.find(function(x, i) {
					_index = i;
					return x.order_id == order.orderId
				});
				_this.remarkText = tapOrder.memo ? tapOrder.memo : '';
				_this.$refs.remarkPoup.init({
					title: '订单备注',
					cntText: '为订单' + tapOrder.orderNo + '添加备注',
					confirmFcn: () => {
						if (!_this.remarkText) {
							uni.showToast({
								title: '请输入备注信息',
								icon: 'none'
							});
							return false;
						} else {
							//添加备注接口
							API.remarkOrder({
								order_id: order.orderId,
								memo: _this.remarkText
							}).then(res => {
								_this.$refs.remarkPoup.close()
								_this.orderData[_index].memo = _this.remarkText
								uni.showToast({
									title: '添加备注成功',
									icon: 'none'
								});
							})
						}
					}

				})
				_this.$refs.remarkPoup.show()
			})
			//添加班级标签
			uni.$on("addLabel", function(order) {
				let _index = null;
				let tapOrder = _this.orderData.find(function(x, i) {
					_index = i;
					return x.order_id == order.orderId
				});
				_this.classLabel = tapOrder.label ? tapOrder.label : '';
				_this.$refs.labelPoup.init({
					title: '添加班级标签',
					cntText: '为订单' + tapOrder.orderNo + '添加班级标签',
					confirmFcn: () => {
						if (!_this.classLabel) {
							uni.showToast({
								title: '请输入标签内容',
								icon: 'none'
							});
							return false;
						} else {
							//添加备注接口
							API.addClassLabel({
								order_id: order.orderId,
								label: _this.classLabel
							}).then(res => {
								_this.$refs.labelPoup.close()
								_this.orderData[_index].label = _this.classLabel
								uni.showToast({
									title: '添加备注成功',
									icon: 'none'
								});
							})
						}
					}

				})
				_this.$refs.labelPoup.show()
			});
			//修改价格
			uni.$on("editPrice", (payload)=>{
				let _index = null;
				let tapOrder = _this.orderData.find(function(x, i) {
					_index = i;
					return x.orderNo == payload.orderNo
				});
				_this.$refs.pricePoup.init({
					title: '修改价格',
					cntText: '修改订单【' + tapOrder.orderNo + '】的价格',
					confirmFcn: () => {
						let _oldPrice=_this.orderData[_index].coursePrice;
						let _price=_this.editPrice.toString().tailCut();
						let reg=/((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/;
						if (!_price) {
							uni.showToast({
								title: '请输入修改的新价格',
								icon: 'none'
							});
							return false;
						} else if(!reg.test(_price)){
							uni.showToast({
								title: '请输入合法的金额',
								icon: 'none'
							});
							return false;
						}else if(parseFloat(_price)>_oldPrice){
							uni.showToast({
								title: '对不起，你设置的价格过高',
								icon: 'none'
							});
							return false;
						}else if(parseFloat(_price)<(_oldPrice*0.8).toFixed(2)){
							uni.showToast({
								title: '对不起，你设置的价格过低',
								icon: 'none'
							});
							return false;
						}else {
							_this.editPrice='';
							// //添加备注接口
							API.editOrderPrice({
								orderNo: payload.orderNo,
								price: parseFloat(_price)
							}).then(res => {
								if(res.data.result==1){
									_this.$refs.pricePoup.close()
									this.getData();
									uni.showToast({
										title: '修改价格成功',
										icon: 'none'
									});
								}else{
									uni.showToast({
										title:'修改失败,'+res.data.msg,
										icon: 'none'
									});
								}
								
							})
						}
					}
			
				})
				_this.$refs.pricePoup.show()
			})
			

		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.orderList {
		padding: 11upx 17upx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	
	.tabBar {
		height: 90upx;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		background-color: #FFFFFF;
		box-sizing: border-box;
		display: flex;

		.tabList {
			display: flex;
			padding: 0 35upx;
			margin-right: 50upx;

			.tabItem {
				flex-shrink: 0;
				line-height: 85upx;
				font-size: 30rpx;
				color: #202932;
				padding: 0 8upx;
				margin-right: 50upx;
			}

			.active {
				color: #f79f21;
				border-bottom: 3upx solid #ffb423;
			}
		}
	}

	.paymentBox {
		display: flex;
		background-color: #FFFFFF;
		height: 90upx;
		padding: 0 38upx;
		align-items: center;

		.paymentItem {
			font-size: 26rpx;
			color: #8f8f8f;
			background-color: #e7e7e7;
			border-radius: 7rpx;
			padding: 10upx 20upx;
			margin-right: 16upx;
		}

		.active {
			background-color: #8f8bad;
			color: #FFFFFF;
		}
	}

	.remarkInput {
		border: 1px solid #cacaca;
		font-size: 24upx;
		margin-top: 20upx;
		height: 60upx;
		padding: 0 15upx;
	}
</style>
